<template>
  <div class="user-management-container">
    <el-card class="user-card">
      <div class="card-header">
        <h2 class="card-title">全部用户</h2>
      </div>
      <div class="toolbar">
        <div class="search-and-filter">
          <el-input v-model="searchQuery" placeholder="搜索用户名或邮箱" clearable class="search-input" @change="handleSearch">
            <template #prefix>
              <el-icon>
                <Search />
              </el-icon>
            </template>
          </el-input>
          <el-select v-model="roleFilter" placeholder="按角色筛选" class="role-filter" clearable @change="handleSearch">
            <el-option label="全部" value="" />
            <el-option label="管理员" value="admin" />
            <el-option label="普通用户" value="user" />
          </el-select>
        </div>
        <el-button type="primary" @click="handleAddUser" class="add-button">
          <el-icon>
            <Plus />
          </el-icon>
          新增用户
        </el-button>
      </div>

      <div class="table-container">
        <el-table :data="filteredUsers" style="width: 100%" v-loading="loading" :row-class-name="tableRowClassName"
          @row-click="handleRowClick">
          <el-table-column prop="username" label="用户名" min-width="120">
            <template #default="scope">
              <div class="user-info">
                <el-avatar :size="40" :src="scope.row.avatar_url || 'https://via.placeholder.com/150'"
                  class="user-avatar" />
                <span class="username">{{ scope.row.username }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="email" label="邮箱" min-width="180" />
          <el-table-column label="个人简介" min-width="200" show-overflow-tooltip>
            <template #default="scope">
              <div class="bio-content">
                <el-icon v-if="!scope.row.bio">
                  <InfoFilled />
                </el-icon>
                {{ scope.row.bio || '暂无简介' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="角色" width="120" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.role === 'admin' ? 'danger' : 'success'" effect="dark" class="role-tag">
                <el-icon v-if="scope.row.role === 'admin'">
                  <Star />
                </el-icon>
                <el-icon v-else>
                  <User />
                </el-icon>
                {{ scope.row.role === 'admin' ? '管理员' : '普通用户' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'" effect="light" class="status-tag">
                <span class="status-indicator" :class="scope.row.status === 'active' ? 'active' : 'inactive'"></span>
                {{ scope.row.status === 'active' ? '正常' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="注册时间" width="150" align="center">
            <template #default="scope">
              <div class="time-info">
                <el-icon>
                  <Calendar />
                </el-icon>
                {{ $formatDateTime(scope.row.created_at) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-tooltip content="编辑用户" placement="top" :show-after="500">
                  <el-button type="primary" circle size="small" @click.stop="handleEdit(scope.row)">
                    <el-icon>
                      <Edit />
                    </el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip :content="scope.row.status !== 'active' ? '解除禁用' : '禁用用户'" placement="top"
                  :show-after="500">
                  <el-button :type="scope.row.status === 'active' ? 'success' : 'warning'" circle size="small"
                    :disabled="scope.row.role === 'admin'" @click.stop="handleToggleBan(scope.row)">
                    <el-icon v-if="scope.row.status === 'active'">
                      <Unlock />
                    </el-icon>
                    <el-icon v-else>
                      <Lock />
                    </el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip content="删除用户" placement="top" :show-after="500">
                  <el-button type="danger" circle size="small" :disabled="scope.row.role === 'admin'"
                    @click.stop="handleDelete(scope.row)">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
          :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange" @current-change="handlePageChange" background />
      </div>
    </el-card>

    <!-- 用户表单对话框 -->
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="650px" @close="resetForm" destroy-on-close
      class="user-dialog" top="5vh">
      <div class="dialog-content">
        <div class="dialog-header-image">
          <div class="avatar-container">
            <el-avatar :size="80" :src="avatarPreview" class="form-avatar" />
            <div class="avatar-overlay" @click="triggerFileInput">
              <el-icon>
                <Camera />
              </el-icon>
            </div>
            <input type="file" ref="fileInput" style="display: none" accept="image/*" @change="handleAvatarChange" />
          </div>
          <div class="dialog-subtitle">{{ dialogMode === 'add' ? '创建新的用户账户' : '更新用户信息' }}</div>
        </div>

        <el-form :model="userForm" :rules="userFormRules" ref="userFormRef" label-position="top" class="user-form">
          <div class="form-row">
            <el-form-item label="用户名" prop="username" class="form-item">
              <el-input v-model="userForm.username" placeholder="请输入用户名" class="styled-input">
                <template #prefix>
                  <el-icon>
                    <User />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="邮箱" prop="email" class="form-item">
              <el-input v-model="userForm.email" type="email" placeholder="请输入邮箱地址" class="styled-input">
                <template #prefix>
                  <el-icon>
                    <Message />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </div>

          <div class="form-row">
            <el-form-item label="角色" prop="role" class="form-item">
              <el-select v-model="userForm.role" placeholder="请选择角色" class="styled-select">
                <el-option label="普通用户" value="user">
                  <div class="option-with-icon">
                    <el-icon>
                      <User />
                    </el-icon>
                    <span>普通用户</span>
                  </div>
                </el-option>
                <el-option label="管理员" value="admin">
                  <div class="option-with-icon">
                    <el-icon>
                      <Star />
                    </el-icon>
                    <span>管理员</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="密码" prop="password" v-if="dialogMode === 'add'" class="form-item">
              <el-input v-model="userForm.password" type="password" show-password placeholder="请输入密码"
                class="styled-input">
                <template #prefix>
                  <el-icon>
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </div>

          <el-form-item label="个人简介" prop="bio" class="form-item bio-item">
            <el-input v-model="userForm.bio" type="textarea" :rows="4" placeholder="请输入用户个人简介" maxlength="500"
              show-word-limit class="styled-textarea" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false" plain class="cancel-button">取消</el-button>
          <el-button type="primary" @click="submitUserForm" :loading="submitting" class="submit-button">
            {{ dialogMode === 'add' ? '创建用户' : '保存修改' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 用户详情抽屉 -->
    <el-drawer v-model="drawerVisible" title="用户详情" size="400px" direction="rtl" class="user-drawer">
      <div v-if="selectedUser" class="user-detail">
        <div class="user-detail-header">
          <el-avatar :size="100" :src="selectedUser.avatar_url || 'https://via.placeholder.com/150'"
            class="detail-avatar" />
          <h3>{{ selectedUser.username }}</h3>
          <p class="user-email">
            <el-icon>
              <Message />
            </el-icon>
            {{ selectedUser.email }}
          </p>
          <el-tag :type="selectedUser.role === 'admin' ? 'danger' : 'success'" effect="dark" class="role-tag">
            <el-icon v-if="selectedUser.role === 'admin'">
              <Star />
            </el-icon>
            <el-icon v-else>
              <User />
            </el-icon>
            {{ selectedUser.role === 'admin' ? '管理员' : '普通用户' }}
          </el-tag>
        </div>

        <div class="user-detail-content">
          <div class="detail-item">
            <h4>
              <el-icon>
                <InfoFilled />
              </el-icon>
              个人简介
            </h4>
            <p class="detail-bio">{{ selectedUser.bio || '暂无简介' }}</p>
          </div>

          <div class="detail-item">
            <h4>
              <el-icon>
                <Warning />
              </el-icon>
              状态
            </h4>
            <el-tag :type="selectedUser.status !== 'active' ? 'danger' : 'success'" effect="light" class="status-tag">
              <span class="status-indicator" :class="selectedUser.status === 'active' ? 'active' : 'inactive'"></span>
              {{ selectedUser.status === 'active' ? '正常' : '禁用' }}
            </el-tag>
          </div>

          <div class="detail-item">
            <h4>
              <el-icon>
                <Calendar />
              </el-icon>
              注册时间
            </h4>
            <p>{{ $formatDateTime(selectedUser.created_at) }}</p>
          </div>

          <div class="detail-item">
            <h4>
              <el-icon>
                <Timer />
              </el-icon>
              最后更新
            </h4>
            <p>{{ $formatDateTime(selectedUser.updated_at) }}</p>
          </div>
        </div>

        <div class="user-detail-actions">
          <el-button type="primary" @click="handleEdit(selectedUser)" class="edit-button">
            <el-icon>
              <Edit />
            </el-icon>
            编辑用户
          </el-button>
          <el-button :type="selectedUser.status !== 'active' ? 'success' : 'warning'"
            @click="handleToggleBan(selectedUser)" :disabled="selectedUser.role === 'admin'" class="ban-button">
            <el-icon v-if="selectedUser.status !== 'active'">
              <Unlock />
            </el-icon>
            <el-icon v-else>
              <Lock />
            </el-icon>
            {{ selectedUser.status !== 'active' ? '解除禁用' : '禁用用户' }}
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Search, Plus, Edit, Delete, Lock, Unlock, User, Star,
  Calendar, Message, InfoFilled, Warning, Timer, Camera
} from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import nework from '../../api/index'
const users = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const searchQuery = ref('')
const roleFilter = ref('')
const loading = ref(false)
const submitting = ref(false)
const { communityApi, userApi, uploadApi, request } = nework
const dialogVisible = ref(false)
const dialogMode = ref('add')
const dialogTitle = computed(() => dialogMode.value === 'add' ? '新增用户' : '编辑用户')

const drawerVisible = ref(false)
const selectedUser = ref(null)
const fileInput = ref(null)
const avatarFile = ref(null)
const avatarPreview = ref('https://via.placeholder.com/150')

const userForm = reactive({
  username: '',
  email: '',
  bio: '',
  role: 'user',
  password: '',
  avatar_url: ''
})

const userFormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度应为3到20个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ],
  bio: [
    { max: 500, message: '简介不能超过500个字符', trigger: 'blur' }
  ],
  role: [
    { required: true, message: '请选择角色', trigger: 'change' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
  ]
}

const userFormRef = ref(null)

const getData = async (Data) => {
  try {
    loading.value = true
    const { data } = await request(userApi.allUser,
      {
        currentPage: currentPage.value,
        pageSize: pageSize.value,
        searchQuery: searchQuery.value,
        roleFilter: roleFilter.value,
        ...Data
      }, 'POST'
    )
    users.value = data.users
    total.value = data.total
  } catch (error) {
    ElMessage.error('获取用户列表失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

const filteredUsers = computed(() => users.value)

const handleSearch = () => {
  const query = {
    search: searchQuery.value,
    role: roleFilter.value,
    currentPage: currentPage.value,  
    pageSize: pageSize.value         
  }
  getData(query)
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  handleSearch()  
}

const handlePageChange = (page) => {
  currentPage.value = page
  handleSearch()  
}

const handleAddUser = () => {
  dialogMode.value = 'add'
  resetForm()
  avatarPreview.value = 'https://via.placeholder.com/150'
  dialogVisible.value = true
}

const handleEdit = (user) => {
  dialogMode.value = 'edit'
  Object.assign(userForm, {
    id: user.id,
    username: user.username,
    email: user.email,
    bio: user.bio || '',
    role: user.role,
    avatar_url: user.avatar_url || ''
  })
  avatarPreview.value = user.avatar_url || 'https://via.placeholder.com/150'
  dialogVisible.value = true
  drawerVisible.value = false
}

const handleRowClick = (row) => {
  handleViewDetails(row)
}

const handleViewDetails = (user) => {
  selectedUser.value = user
  drawerVisible.value = true
}

const triggerFileInput = () => {
  fileInput.value.click()
}

const handleAvatarChange = (e) => {
  const file = e.target.files[0]
  if (!file) return
  // 验证文件类型
  if (!file.type.includes('image/')) {
    ElMessage.error('请上传图片文件')
    return
  }
  // 验证文件大小（限制为2MB）
  if (file.size > 2 * 1024 * 1024) {
    ElMessage.error('图片大小不能超过2MB')
    return
  }
  avatarFile.value = file
  // 创建预览
  const reader = new FileReader()
  reader.onload = (e) => {
    avatarPreview.value = e.target.result
  }
  reader.readAsDataURL(file)
}

const uploadAvatar = async (file) => {
  if (!file) return null
  try {
    const formData = new FormData();
    formData.append('avatar', file, file.name);
    const { data } = await request(uploadApi.userAvatar, formData, 'POST')
    return data.url
  } catch (error) {
    console.error('上传错误详情:', {
      status: error.response?.status,
      data: error.response?.data
    });
  }
}

const handleToggleBan = async (user) => {
  try {
    await ElMessageBox.confirm(
      `确定要${user.status !== 'active' ? '解除禁用' : '禁用'}用户 ${user.username} 吗？`,
      '确认操作',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    loading.value = true
    // 调用冻结/解冻用户API
    const { data } = await request(userApi.freezeUser, {
      userId: user.id,
      status: user.status === 'active' ? 'frozen' : 'active'
    }, 'POST')
    // 更新用户状态
    user.status = user.status === 'active' ? 'frozen' : 'active'
    ElMessage.success(`用户 ${user.username} 已${user.status !== 'active' ? '禁用' : '解除禁用'}`)
    // 如果当前选中的用户是被操作的用户，更新选中用户的状态
    if (selectedUser.value && selectedUser.value.id === user.id) {
      selectedUser.value.status = user.status
    }
  } catch (error) {
    ElMessage.error('操作失败，请重试')
    console.error('Toggle ban error:', error)
  } finally {
    loading.value = false
  }
}

const handleDelete = async (user) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除用户 ${user.username} 吗？此操作不可恢复！`,
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }
    )
    await request(userApi.deleteUser, { userId: user.id }, 'POST')
    ElMessage.success('用户删除成功')
    getData()
  } catch {
    ElMessage.error('删除失败，请重试')
  }
}

const resetForm = () => {
  if (userFormRef.value) {
    userFormRef.value.resetFields()
  }
  Object.assign(userForm, {
    username: '',
    email: '',
    bio: '',
    role: 'user',
    password: '',
    avatar_url: ''
  })
  avatarFile.value = null
}

const submitUserForm = async () => {
  if (!userFormRef.value) return

  try {
    await userFormRef.value.validate()
    submitting.value = true

    // 如果有新的头像文件，先上传头像
    let avatarUrl = userForm.avatar_url
    if (avatarFile.value) {
      avatarUrl = await uploadAvatar(avatarFile.value)
      if (!avatarUrl) {
        submitting.value = false
        return
      }
    }
    // 准备提交的数据
    const userData = {
      ...userForm,
      avatar_url: avatarUrl
    }
    if (dialogMode.value === 'add') {
      // 添加新用户逻辑
      const { data } = await request(userApi.register, userData, 'POST')
      ElMessage.success("用户创建成功")
      dialogVisible.value = false
      getData() // 刷新用户列表
    } else {
      // 更新用户逻辑
      const { data } = await request(userApi.profile, userData, 'PUT')
      ElMessage.success('用户更新成功')
      dialogVisible.value = false
      // 如果当前选中的用户是被编辑的用户，更新选中用户的信息
      if (selectedUser.value && selectedUser.value.id === userForm.id) {
        Object.assign(selectedUser.value, userData)
      }
      getData() // 刷新用户列表
    }
  } catch (error) {
    console.error('表单验证失败', error)
    ElMessage.error(error)
  } finally {
    submitting.value = false
  }
}

const tableRowClassName = ({ row }) => {
  if (row.status !== 'active') {
    return 'banned-row'
  }
  return ''
}

onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss">
// 主题颜色
$primary-color: #409eff;
$primary-light: #ecf5ff;
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$info-color: #909399;
$background-color: #f5f7fa;
$text-color: #303133;
$text-secondary: #606266;
$text-light: #909399;
$border-color: #dcdfe6;

.user-management-container {
  display: flex;
  justify-content: center;
}

.user-card {
  width: 100%;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  .card-title {
      margin: 0;
      font-size: 22px;
      font-weight: 600;
      color: $text-color;
      position: relative;
      padding-left: 12px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 20px;
        background: linear-gradient(to bottom, $primary-color, lighten($primary-color, 10%));
        border-radius: 2px;
      }
    }
  .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0px;

    .search-and-filter {
      display: flex;
      gap: 16px;
    }

    .search-input {
      width: 300px;
    }

    .role-filter {
      width: 150px;
    }

    .add-button {
      background: linear-gradient(135deg, #409eff, #64b5f6);
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
      }
    }
  }

  .table-container {
    width: 100%;
  }

  .pagination {
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;

  .user-avatar {
    border: 2px solid #eaeaea;
    transition: all 0.3s ease;

    &:hover {
      transform: scale(1.1);
      border-color: $primary-color;
    }
  }

  .username {
    font-weight: 500;
  }
}

.bio-content {
  display: flex;
  align-items: center;
  gap: 8px;
  color: $text-secondary;

  .el-icon {
    color: $info-color;
  }
}

.role-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 20px;

  .el-icon {
    font-size: 14px;
  }
}

.status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 20px;

  .status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;

    &.active {
      background-color: $success-color;
      box-shadow: 0 0 0 2px rgba($success-color, 0.2);
    }

    &.inactive {
      background-color: $danger-color;
      box-shadow: 0 0 0 2px rgba($danger-color, 0.2);
    }
  }
}

.time-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: $text-secondary;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

// 用户表单对话框样式
.user-dialog {
  :deep(.el-dialog__body) {
    padding: 0;
  }

  .dialog-content {
    padding: 0 0 20px;
  }

  .dialog-header-image {
    background: linear-gradient(135deg, #409eff, #64b5f6);
    padding: 30px 0;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .avatar-container {
      position: relative;
      margin-bottom: 15px;

      .form-avatar {
        background-color: white;
        border: 4px solid white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        width: 80px;
        height: 80px;
        object-fit: cover;
      }

      .avatar-overlay {
        position: absolute;
        bottom: 0;
        right: 0;
        background-color: $primary-color;
        color: white;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: 2px solid white;
        transition: all 0.2s ease;

        .el-icon {
          font-size: 14px;
        }

        &:hover {
          background-color: darken($primary-color, 10%);
          transform: scale(1.1);
        }
      }
    }

    .dialog-subtitle {
      color: white;
      font-size: 16px;
      opacity: 0.9;
    }
  }

  .user-form {
    padding: 0 30px;

    .form-row {
      display: flex;
      gap: 20px;
      margin-bottom: 10px;

      .form-item {
        flex: 1;
      }
    }

    .bio-item {
      margin-bottom: 0;
    }

    .styled-input,
    .styled-select,
    .styled-textarea {
      .el-input__wrapper {
        box-shadow: 0 0 0 1px rgba($border-color, 0.5);
        border-radius: 8px;
        padding: 0 12px;
        transition: all 0.3s ease;

        &:hover,
        &.is-focus {
          box-shadow: 0 0 0 1px $primary-color;
        }
      }

      .el-input__prefix {
        color: $primary-color;
      }
    }

    .styled-textarea {
      .el-textarea__inner {
        border-radius: 8px;
        border-color: rgba($border-color, 0.5);
        padding: 12px;
        transition: all 0.3s ease;

        &:hover,
        &:focus {
          border-color: $primary-color;
        }
      }
    }

    :deep(.el-form-item__label) {
      font-weight: 500;
      color: $text-color;
      padding-bottom: 8px;
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 30px;
    border-top: 1px solid $border-color;

    .cancel-button,
    .submit-button {
      min-width: 100px;
      border-radius: 8px;
      padding: 10px 20px;
      font-weight: 500;
    }

    .submit-button {
      background: linear-gradient(135deg, #409eff, #64b5f6);
      border: none;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
      }
    }
  }
}

.user-detail {
  padding: 20px;

  .user-detail-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e5e7eb;

    .detail-avatar {
      border: 3px solid white;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      margin-bottom: 16px;
    }

    h3 {
      margin: 0 0 8px;
      font-size: 24px;
      font-weight: 600;
      color: $text-color;
    }

    .user-email {
      margin: 0 0 16px;
      color: $text-secondary;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .role-tag {
      padding: 6px 16px;
    }
  }

  .user-detail-content {
    .detail-item {
      margin-bottom: 24px;

      h4 {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 10px;
        color: $text-color;
        display: flex;
        align-items: center;
        gap: 8px;

        .el-icon {
          color: $primary-color;
        }
      }

      p {
        margin: 0;
        color: $text-secondary;
        line-height: 1.6;
      }

      .detail-bio {
        background-color: #f9f9f9;
        padding: 12px;
        border-radius: 8px;
        border-left: 3px solid $primary-color;
      }
    }
  }

  .user-detail-actions {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    gap: 16px;

    .edit-button,
    .ban-button {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 8px;
      padding: 12px;
    }
  }
}

.option-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.banned-row) {
  background-color: rgba($danger-color, 0.05);
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;

  .el-table__header-wrapper {
    th {
      background-color: #f5f7fa;
      font-weight: 600;
      color: $text-color;
    }
  }
}

:deep(.el-table__header) {
  background-color: #f5f7fa;
}

:deep(.el-table__row) {
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    background-color: rgba($primary-color, 0.05);
  }
}

:deep(.el-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:deep(.el-button-group) {
  .el-button {
    margin-right: 0;
  }
}

:deep(.el-drawer__header) {
  margin-bottom: 0;
  padding: 20px;
  border-bottom: 1px solid $border-color;

  .el-drawer__title {
    font-size: 20px;
    font-weight: 600;
    color: $text-color;
  }
}

:deep(.el-dialog__header) {
  background: linear-gradient(135deg, #409eff, #64b5f6);
  padding: 20px;
  margin-right: 0;

  .el-dialog__title {
    color: white;
    font-weight: 600;
  }

  .el-dialog__headerbtn {
    .el-dialog__close {
      color: white;
    }
  }
}

@media (max-width: 768px) {
  .user-card {
    padding: 16px;

    .toolbar {
      flex-direction: column;
      align-items: stretch;
      gap: 16px;

      .search-and-filter {
        flex-direction: column;
      }

      .search-input,
      .role-filter {
        width: 100%;
      }

      .add-button {
        width: 100%;
      }
    }

    .table-container {
      overflow-x: auto;
    }
  }

  .user-dialog {
    .form-row {
      flex-direction: column;
      gap: 0;
    }
  }

  .user-detail-actions {
    flex-direction: column;

    .edit-button,
    .ban-button {
      width: 100%;
    }
  }
}
</style>
